<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.4.5.min.css">
    <script src="jquery/jquery.min.js"></script>
    <script src="jquery/jquery.mobile-1.4.5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div data-role="page" id="home_page" data-theme="b">

    <div data-role="header" data-position="fixed">
        <a href="#defaultpanel" data-role="button" data-icon="bullets">菜单</a>
        <h1>我的主页</h1>
        <a href="#mine_page" data-role="button" data-icon="user" data-transition="slide">我的</a>
    </div>

    <div data-role="content">
        <p>我是主页！</p>
    </div>

    <div data-role="footer" data-position="fixed">
      
    </div>
    <div data-role="panel" id="defaultpanel" data-theme="b">
 
      <div class="panel-content">
        <a href="#mine_page"><h1 >我</h1></a>
        <ul data-role="listview">
          <li><a href="acura.html">Acura</a></li>
          <li><a href="audi.html">Audi</a></li>
          <li><a href="bmw.html">BMW</a></li>
        </ul>
      </div>

    </div>
</div>

<div data-role="page" id="mine_page" data-theme="b">

    <div data-role="header" data-position="fixed">
        <a href="#home_page" data-role="button" data-icon="home" data-transition="slide" data-direction="reverse">首页</a>
        <h1>我的</h1>
        <a href="#option_page" data-role="button" data-icon="gear">设置</a>
    </div>

    <div data-role="content">

    </div>

    <div data-role="footer" data-position="fixed">
       
    </div>

</div>

<div data-role="page" id="option_page" data-theme="b">

    <div data-role="header" data-position="fixed">
        <a href="#mine_page" data-role="button" data-icon="back" data-transition="slide" data-direction="reverse">返回</a>
        <h1>设置</h1>
    </div>

    <div data-role="content">
        <fieldset>
          <div data-role="fieldcontain">
            <label for="select-option-1">Select-based:</label>
            <select id="select-option-1" data-role="flipswitch" class="option-list-flipswitch">
              <option value="leave">Bye</option>
              <option value="arrive">Hi</option>
            </select>
          </div>
        </fieldset>
        <fieldset>
          <div data-role="fieldcontain">
            <label for="checkbox-option-2">Select-based:</label>
            <input type="checkbox" id="checkbox-option-2" data-role="flipswitch" class="option-list-flipswitch">
          </div>
        </fieldset>
    </div>

    <div data-role="footer" data-position="fixed">
       
    </div>

</div>

</body>
</html>